<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{commons/commons::head(showArchived)}">
</head>
<style>
    .d {
        width: 100px;
        height: 22px;
        line-height: 22px;
        border: solid 1px #a8edea;
        text-align: center;
        background-color: #fff9ec;
        box-shadow: 0 1px 3px rgba(34, 25, 25, 0.2)
    }

    .dd {
        margin: -8px 0 0 -8px;
    }
    body a:hover{
        cursor: pointer;
        color: olive;
    }

    body .layui-timeline-content {
        padding-left: 20px;
    }
</style>
<body style="background-image: linear-gradient(500grad,#a8edea,#fad4e0)">
<div th:replace="~{commons/commons::body}">
</div>
<!--时间线-->
<fieldset class="layui-elem-field layui-field-title " style="margin-top: 30px;">
    <legend style="margin-left: 50px;font-size: 30px;font-weight: bold">归档时间线：大事记</legend>
</fieldset>
<ul class="layui-timeline layui-col-md1 layui-col-xs-offset1">
    <li class="layui-timeline-item">
        <i class="layui-icon layui-timeline-axis"></i>
        <div class="layui-timeline-content layui-text">
            <div class="layui-timeline-title">至今</div>
        </div>
    </li>
    <li class="layui-timeline-item" th:each="ar:${arch}" th:if="${ar.year!=null && ar.month!=null}">
        <i class="layui-icon layui-timeline-axis"></i>
        <a th:href="@{/arch/showArch/{date}(date=${ar.year+'-0'+ar.month})}">
            <div class="layui-timeline-content layui-text" style="display: flex" >
                <div class="layui-timeline-title d" th:text="${ar.year+'年'+ar.month+'月'}"></div>
                <div class="layui-badge dd" th:text="${ar.count}"></div>
            </div>
        </a>
    </li>
    <li class="layui-timeline-item">
        <i class="layui-icon layui-anim layui-anim-rotate layui-anim-loop layui-timeline-axis"></i>
        <div class="layui-timeline-content layui-text">
            <div class="layui-timeline-title">更久以前</div>
        </div>
    </li>
</ul>
<!--内容展示-->
<div class="layui-row layui-inline layui-col-md8" id="app">
    <div class="layui-col-md-offset1" style="margin-bottom: 25px" v-for="(item,index) in items">
        <div class="layui-card " style="background-image: linear-gradient(100grad,#a8edea,#fed6e3)">
            <div class="layui-card-header layui-row">
                <span><a :id="item.id" :href="'/articles/showDetail/'+item.id">
                    {{item.title}}
                </a></span>
                <span class="layui-layout-right layui-inline" style="right: 20px">
                <img alt="查看数量" class="layui-nav-img"
                     src="/static/layui/font/eye.svg" style="width: 20px;height: 15px;margin-right: -4px">
                                    {{item.viewCounts}}
            </span>
            </div>
            <div class="layui-card-body layui-text">
                <blockquote class="layui-inline">
                    &nbsp;&nbsp;{{item.summary.substring(0,400)}}
                </blockquote>
            </div>
            <div class="layui-card-body layui-table-fixed-l" style="padding: 16px 15px;">
                <img alt="作者" class="layui-nav-img" src="/static/img/author.svg"
                     style="width: 20px;height: 40px;margin-right:-2px">
                                {{item.author}}
                <div class="layui-col-xs-offset2 layui-card-body " style="width: 250px;margin:-40px 0 0 100px">
                    <span :id="tag.id" v-for="(tag,index1) in item.tags"
                          class="layui-border-green layui-btn-radius layui-inline layui-btn-xs">
                        {{tag.tagName}}
                    </span>
                </div>
                <span class="layui-layout-right layui-inline" style="right: 15px;margin-top: 25px">
                    <img alt="发布时间" class="layui-nav-img" style="width: 20px;height: 15px;margin-right:-2px"
                         src="/static/layui/font/clock.svg">
                                        {{item.createDate}}
                </span>
            </div>
        </div>
    </div>


    <!--分页-->
    <div class=" layui-col-md-offset4" style="margin-top: 18px" id="demo2-1"></div>
</div>

</body>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            items: [],
            date: '[[${date}]]'
        }
    });
    layui.use(['element', 'laypage'], function () {
        let element = layui.element;
        let laypage = layui.laypage;
        let cnt = 0;
        $.ajax({
            type: 'post',
            url: '/arch/cnt',
            async: false,
            data: {
                date:app.date
            },
            success: function (e) {
                cnt = e.data;
                console.log(this.count + "count");
            }
        });
        laypage.render({
            elem: 'demo2-1'
            , count: cnt
            , theme: '#FF5722'
            , limit: 3
            , curr: location.hash.replace('#!fenye=', '') //获取起始页
            , hash: '/next/n' //自定义hash值
            , jump: function (obj, first) {
                $.post('/arch/showArch'

                    , {date:app.date,page: obj.curr, pageSize: obj.limit}
                    , function (result) {
                        app.items = result.data;
                        console.log("冲刺！完成我的博客！");
                        // console.log("res" + res);
                        // console.log("长度" + res.length);
                    });
            }
        });
    });
</script>
</html>